<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      img {
        width: 100%;
        height: 100%;
        display: block;
      }

      .box {
        width: 450px;

        margin: 50px;
        display: flex;
        flex-direction: column;

        position: relative;
      }

      .box > .show {
        width: 450px;
        height: 450px;
        border: 1px solid #333;
        position: relative;
      }

      .box > .show > .mask {
        width: 200px;
        height: 200px;
        background-color: yellow;
        opacity: 0.4;
        position: absolute;
        top: 0px;
        left: 0px;

        display: none;
      }

      .box > .list {
        width: 100%;
        flex: 1;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        box-sizing: border-box;
        padding: 20px;
      }

      .box > .list > p {
        width: 54px;
        height: 54px;
        border: 1px solid #333;
        margin-right: 10px;
      }

      .box > .list > p.active {
        border-color: red;
      }

      .box > .enlarge {
        width: 400px;
        height: 400px;

        position: absolute;
        top: 0;
        left: 101%;

        background: url(./imgs/1.big.jpg) no-repeat;
        background-size: 800px 800px;
        background-position: 0 0;

        display: none;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="show">
        <img src="./imgs/1.jpg" alt="" />
        <div class="mask"></div>
      </div>
      <div class="list">
        <p class="active">
          <img
            src="./imgs/1.small.jpg"
            showImg="./imgs/1.jpg"
            enlargeImg="./imgs/1.big.jpg"
            alt=""
          />
        </p>
        <p>
          <img
            src="./imgs/2.small.jpg"
            showImg="./imgs/2.jpg"
            enlargeImg="./imgs/2.big.jpg"
            alt=""
          />
        </p>
      </div>
      <div class="enlarge"></div>
    </div>
    <script>
      /* 
    分析需求：1、鼠标移入 遮罩层和 放大图都需要显示，鼠标移除的时候 遮罩层和放大图隐藏
             2、鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题）
             3、放大图也要按照左边比例来移动
             4、鼠标移到小图上可以切换图片
     */

      // 获取show 的元素
      var showEle = document.querySelector(".show");
      // 获取遮罩层
      var maskEle = document.querySelector(".mask");
      // 获取放大区域
      var enlargeEle = document.querySelector(".enlarge");

      // 获取box元素
      var boxEle = document.querySelector(".box");
      showEle.onmouseenter = function () {
        maskEle.style.display = "block";
        enlargeEle.style.display = "block";
      };

      showEle.onmouseleave = function () {
        console.log(111);
        maskEle.style.display = "none";
        enlargeEle.style.display = "none";
      };

      // 遮罩层跟随鼠标移动；

      showEle.onmousemove = function (e) {
        // var x = e.offsetX;  //相对于元素自身的偏移量；
        // var y = e.offsetY;
        // console.log(this.offsetLeft);

        var x = e.clientX - boxEle.offsetLeft - maskEle.offsetWidth / 2;
        var y = e.clientY - boxEle.offsetTop - maskEle.offsetHeight / 2;

        // 边界判断；
        // 左边判断
        if (x < 0) {
          x = 0;
        }
        // 右边判断
        if (x > this.offsetWidth - maskEle.offsetWidth) {
          x = this.offsetWidth - maskEle.offsetWidth;
        }

        // 上边边界

        if (y < 0) {
          y = 0;
        }

        // 下边边界
        if (y > this.offsetHeight - maskEle.offsetHeight) {
          y = this.offsetHeight - maskEle.offsetHeight;
        }

        // 获取enlarge的背景图的宽和高；

        var bgSize = getComputedStyle(enlargeEle, null)["background-size"];
        console.log(bgSize);
        var arr = bgSize.split(" ");
        var wNum = parseInt(arr[0]); //背景图的宽
        var hNum = parseInt(arr[1]); //背景图的高；

        // 获取x距离
        var xx = (maskEle.offsetLeft / this.offsetWidth) * wNum;
        var yy = (maskEle.offsetTop / this.offsetHeight) * hNum;
        console.log(xx, yy);
        enlargeEle.style.backgroundPosition = `-${xx}px -${yy}px`;
        // console.log(x,y);
        maskEle.style.left = x + "px";
        maskEle.style.top = y + "px";
      };

      // 点击小图切换 对应的图像
      var psEle = document.querySelectorAll(".list p");
      var imgEle = document.querySelector(".show img");
      psEle.forEach((item, key) => {
        item.onclick = function () {
          psEle.forEach((item, k) => {
            if (k == key) {
              item.classList.add("active");
            } else {
              item.classList.remove("active");
            }
          });

          // console.log(key);
          // 替换上面的图像；
          imgEle.src = `./imgs/${key + 1}.jpg`;
          // 切换右边的大图；
          enlargeEle.style.backgroundImage = `url(./imgs/${key + 1}.big.jpg)`;
        };
      });
    </script>
  </body>
</html>
